<script setup>
// 账号资料
import { ref,onMounted} from 'vue'
import { vipinfoApi, vipnameApi,photomodifyApi} from '../../api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { useStorage } from '@vueuse/core'
const listinfo2 = ref([])
const listinfo = ref([])
const name = ref()
const radio1 = ref('1')
const imageUrl = ref('') //头像
const companytitle = ref('')
const router = useRouter()
const headerobj =ref({
    Token:useStorage('token').value
}) 
// 获取会员信息
const getinfo = async function () {
  const msg = await vipinfoApi()
  if (msg.data.code == 0) {
    listinfo.value = msg.data.data
    name.value = msg.data.data.nick
	  imageUrl.value = msg.data.data.photo
    if (listinfo.value.apply_Enterprise_Authentication == 2) {
      companytitle.value = listinfo.value.enterpriseTitle
    } else {
      companytitle.value = listinfo.value.apply_Enterprise_Title
    }
  }
}


const photomodify = async function () {
	const msg = await photomodifyApi({
		Photo:imageUrl.value
	})
}

// 上传成功，上传成功以后拿到后端返回的图片在线地址，然后在调用修改图片
const handleAvatarSuccess = (response, uploadFile) => {
	if (response.code == 0) {
		imageUrl.value = response.data.path
		photomodify()
	}
}


// 修改姓名
const changename = async function () {
  const msg = await vipnameApi({
        Nick:listinfo.value.nick
  })
  if (msg.data.code == 0) {
      ElMessage({
      message: msg.data.msg,
      type: 'success',
      })
      getinfo()
  } else {
    ElMessage.error(msg.data.msg)
  }
}


const push = function () {
  router.push({path:'/enterprise/enterprises'})
}
onMounted(() => {
  if (useStorage('token').value !== undefined) {
     getinfo()
  }
})

</script>
<template>
    <div class="member_right">
    <div class="right_main">
      <div class="member_right_title">会员信息</div>
      <div class="welcome">
    	<div class="touxiang">    
            <!-- <img src="/images/dl.jpg" width="65" height="65" alt="会员头像" />
            <span class="gray"><a title="" href="#">修改头像</a></span> -->
			<el-upload
			class="avataruploader"
			action="http://adminapixz.tdzzxx.cn/API/Upload_AJAX/Photo"
			:headers="headerobj"
			:show-file-list="false"
			:on-success="handleAvatarSuccess"
			:before-upload="beforeAvatarUpload"
  		>
    <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 74px;height:74px"/>
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    <template #trigger>
      <!-- <p>上传头像</p> -->
      <img :src="imageUrl" alt="" class="avatar" style="width: 74px;height:74px">
    </template>
      </el-upload>
        </div>
        <div class="rightbox main_top">
        	<ul>
            	<li><span class="f14 blue">{{name}}</span> 欢迎回来！</li>
              <li class="ddxg"><p>公司名称：<strong class="red1">{{ companytitle }}</strong></p>
              <p v-if="listinfo.apply_Enterprise_Authentication ==0">企业认证：<strong  class="red1" >未申请</strong></p>
              <p v-if="listinfo.apply_Enterprise_Authentication ==1">企业认证：<strong  class="red1" >认证中</strong></p>
              <p v-if="listinfo.apply_Enterprise_Authentication ==2">企业认证：<strong  class="red1" >已认证</strong></p>
              <p v-if="listinfo.apply_Enterprise_Authentication ==3"> 企业认证：<strong  class="red1" >已驳回</strong></p>
              </li>
            </ul>
        </div>
    <div style="clear:both;"></div>
      </div>
      <div class="member_right_title">账号资料</div>
      <div class="zhanghao_dlxx">
        <el-form
        :label-position="labelPosition"
        label-width="auto"
        style="max-width: 600px"
      >
        <el-form-item label="姓名：">
         <div>
            <el-input  style="width: 266px;" v-model="listinfo.nick"></el-input>
         </div>
        </el-form-item>
      </el-form>
      <div style="display: flex;justify-content: center;margin-top: 20px;">
        <el-button type="primary" @click="changename">确定</el-button>
      </div>
      
        <div style="clear:both;"></div>
      </div>
	  <div class="member_right_title s15">企业资料</div>
      <div class="zhanghao_dlxx">
        <el-form
        :label-position="labelPosition"
        label-width="auto"
        style="max-width: 600px"
      >
        <el-form-item label="公司名称：">
         <div>
            {{ companytitle }}
         </div>
        </el-form-item>
        <el-form-item label="企业认证：">
          <div v-if="listinfo.apply_Enterprise_Authentication==0" >
            未申请<a @click="push" >(去认证)</a>
          </div>
          <div v-if="listinfo.apply_Enterprise_Authentication==1" >
            认证中
          </div>
          <div v-if="listinfo.apply_Enterprise_Authentication==2" >
            认证成功
          </div>
          <div v-if="listinfo.apply_Enterprise_Authentication==3" >
            被驳回<a @click="push" class="ahover a">(重新认证)</a><span style="margin-left: 10px;">驳回原因：{{ listinfo.apply_Enterprise_Authentication_Text }}</span>
          </div>
        </el-form-item>
      </el-form>
        <div style="clear:both;"></div>
      </div>
    </div>
  </div>
      <div style="clear:both;"></div>
</template>
<style scoped>
.ahover{
  color: #FF6600;
}
:deep(.avataruploader){
  display: flex;
  width: 74px;
  flex-direction: column-reverse;
}
</style>